<template>
  <div class="left clearfix container" >
    <div class="article clearfix" v-if="!loading"> 
      <div 
           style="'width': '100%'"
           class="article-left">
        <div class="header">
          <h1 class="title">{{articleDetail.title}}</h1>
          <div class="author">
            <div class="avatar">
              <img class="auth-logo"
                   src="../assets/userLogo.jpeg"
                   alt="BiaoChenXuYing">
            </div>
            <div class="info">
              <span class="name">
                <span>{{info[0].userName}}</span>
              </span>
              <div props-data-classes="user-follow-button-header"
                   data-author-follow-button="" />
              <div class="meta">
                <span class="publish-time">
                    {{ articleDetail.ctime | formateDate("YMDHMS") }}
                </span>
                <span class="wordage">
                  字数 {{ nums }}
                </span>
                <span class="views-count">
                  阅读 {{ articleDetail.scanned }}
                </span>
                <span class="comments-count">
                  评论 {{articleDetail.comments.length}}
                </span>
                <span class="likes-count">
                  喜欢 {{ likes }}
                </span>
              </div>
            </div>
            <div class="tags "
                 title="标签">
              <el-tag size="mini"
                      class="tag"
                      type="success">{{ articleDetail.kind =='1' ? '科技': articleDetail.kind =='2' ? '新闻' : articleDetail.kind =='3'? '百科' : articleDetail.kind =='4'? '互联网': '随笔'}}</el-tag>   
            </div>
            <span class="clearfix" />
          </div>
        </div>
        <div class="content">
          <div id="content"
               class="article-detail"
               v-html="articleDetail.content">
          </div>
        </div>
        <div class="hearts">
          <el-button type="danger"
                     size="large"
                     icon="heart"
                     :loading="isLoading"
                     @click="likeArticle">
            点赞
          </el-button>
        </div>
        <div class="comment">
          <el-input placeholder="文明社会，理性评论"
                    type="textarea"
                    v-model="content"></el-input>
          <el-button style="margin-top: 15px"
                     type="primary"
                   @click="handleAddComment"
                   >发 送</el-button>
        </div>
        <CommentList v-if="!isLoading"
                     :numbers="articleDetail.comments.length"
                     :list="articleDetail.comments"
                     :article_id="articleDetail._id"
                     />
      </div>
      <!-- <div v-if="!isMobileOrPc"
           style="width: 23%"
           class="article-right fr anchor"
           v-html="articleDetail.toc"></div>
      <LoadingCustom v-if="isLoading"></LoadingCustom> -->
    </div>
     <Loading v-if="loading"/>
    </div>
</template>

<script>
import Loading from '../components/loading.vue'
import CommentList from "../components/comments.vue";
import axios from 'axios'
export default {
  data () {
    return {
      isLoading:false,
      articleDetail:'',
      content:'',
      loading:true,
      nums:'',
      scanned:'',
      likes:'',
      likeTimes:'',
      userId:'',
      times:0,
      cacheTime:'',
      userNames:'',
      info:[]
    }
  },
  created () {
    let id = this.$route.query.id
     var that = this
    axios.post('api/article/article',{id:id})
      .then(data => {
        console.log(data)
        if(data.data.content[0].info.length==0){
            this.info =data.data.content[0].infos
        }else{
          this.info=data.data.content[0].info
        }
         this.articleDetail = data.data.content[0]
         var count= that.fucCheckLength(that.articleDetail.content)
         this.likes = data.data.content[0].likes
          this.nums = count
         this.loading=false
         this.handleSearch(data.data.content[0].desc);
      })
  },
  components:{
     Loading,
     CommentList
  },
  mounted () {
  },
  beforeDestroy() {
    document.title = "lele的博客网站";
    document
      .getElementById("keywords")
     
    document
      .getElementById("description")
      
  },
   watch: {
    '$route' (to, from) { // 监听路由是否变化
    
      if (to.query.tag_id !== from.query.tag_id) {
         let id =  to.query.tag_id
         let tag_name = to.query.tag_name
         this.tag_id =id
         this.tag_name=tag_name
         axios.post('api/article',{kinds:to.query.tag_id})
              .then(data => {
                console.log(data)
                // this.articlesList = ''
                this.articlesList = data.data
                this.isLoading=false
              })
      }
     
    }
  },
  methods:{
    handleSearch(datas) {
    let keyword = datas;
    let description = datas;
    let title = datas;
    document.title = title;
    
  },
   likeArticle(){
     var userId = this.getCookie('userID');
     console.log( this.userNames)
      let id = this.$route.query.id
      let that = this
      if (!this.articleDetail._id) {
      this.$message({
        message: "该文章不存在！",
        type: "warning"
      });
      return;
    }
    if (userId) {
      that.userId = userId;
    } else {
      this.$message({
        message: "登录才能点赞，请先登录！",
        type: "warning"
      });
      return;
    }
    if (this.likeTimes > 0) {
      this.$message({
        message: "您已经点过赞了！还想怎样！" ,
        type: "warning"
      });
    }else{
       axios.post('api/article/updatearticle',{id:id,userId:that.userId})
            .then(data => {
              console.log(data)
              //  this.articleDetail = data.data.content[0]
                this.likeTimes++
            this.$message({
              message: data.data.content,
              type: data.data.type,
            });
        })
    }
   },
   fucCheckLength(strTemp)  {
   var re = /[\u4E00-\u9FA5]/g;//中文正则
   var reg = /[\u3002|\uff1f|\uff01|\uff0c|\u3001|\uff1b|\uff1a|\u201c|\u201d|\u2018|\u2019|\uff08|\uff09|\u300a|\u300b|\u3008|\u3009|\u3010|\u3011|\u300e|\u300f|\u300c|\u300d|\ufe43|\ufe44|\u3014|\u3015|\u2026|\u2014|\uff5e|\ufe4f|\uffe5]/g;//中文标点正则
    var leng = strTemp.match(re).length;  
    if(strTemp.match(reg)!=null){
	  var	biaodianNum =  strTemp.match(reg).length;
	}
    return leng + biaodianNum;
    } ,
    handleAddComment(){
       var userId = this.getCookie('userID');
        var userNames = this.getCookie('userName');
      this.userNames = userNames
              if (!this.articleDetail._id) {
              this.$message({
                message: "该文章不存在！",
                type: "error"
              });
              return;
            }
            if (this.times > 2) {
              this.$message({
                message: "您今天评论的次数已经用完，明天再来评论吧！",
                type: "warning"
              });
              return;
            }
            let now = new Date();
            let nowTime = now.getTime();
            if (nowTime - this.cacheTime < 4000) {
              this.$message({
                message: "您评论太过频繁，1 分钟后再来留言吧！",
                type: "warning"
              });
              return;
            }

            if (!this.content) {
              this.$message({
                message: "请输入内容!",
                type: "warning"
              });
              return;
            }
            let user_id = "";
            if (userId) {
              user_id = userId;
            } else {
              this.$message({
                message: "登录才能评论，请先登录！",
                type: "warning"
              });
              return;
            }
            axios.post('api/comments',{userId:user_id,content:this.content,articleID:this.articleDetail._id,userName:this.userNames})
            .then(data => {
              console.log(data)
              //  this.articleDetail = data.data.content[0]
                this.likeTimes++
                this.$message({
                  message: data.data.content,
                  type: data.data.type,
                });
                 window.location.reload()
        })
            this.cacheTime = nowTime;
            this.times++
    }
  // 
  }
}
</script>

<style lang='less' scoped>
@import url("../less/index.less");
.anchor {
  display: block;
  position: sticky;
  top: 213px;
  margin-top: 213px;
  border-left: 1px solid #eee;
  .anchor-ul {
    position: relative;
    top: 0;
    max-width: 250px;
    border: none;
    -moz-box-shadow: 0 0px 0px #fff;
    -webkit-box-shadow: 0 0px 0px #fff;
    box-shadow: 0 0px 0px #fff;

    li.active {
      color: #009a61;
    }
  }
  a {
    color: #333;
  }
}
.article {
  width: 100%;
  .header {
    .title {
      margin: 20px 0 0;
      text-align: center;
      font-size: 34px;
      font-weight: bold;
    }
    .author {
      position: relative;
      margin: 30px 0 40px;
      padding-left: 50px;
      .avatar {
        position: absolute;
        left: 0;
        top: 0;
        width: 48px;
        height: 48px;
        vertical-align: middle;
        display: inline-block;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .info {
        float: left;
        vertical-align: middle;
        // display: inline-block;
        margin-left: 8px;
        a {
          color: #333;
        }
      }
      .name {
        margin-right: 3px;
        font-size: 16px;
        vertical-align: middle;
      }
      .meta {
        margin-top: 5px;
        font-size: 12px;
        color: #969696;
        span {
          padding-right: 5px;
        }
      }
      .tags {
        float: right;
        padding-top: 15px;
        // padding-right: 20px;
        .tag {
          // padding: 0 10px;
          margin-left: 5px;
          border-right: 2px solid #eee;
        }
      }
    }
  }
  .content {
    min-height: 300px;
  }
}
.hearts {
  height: 60px;
  text-align: center;
  margin: 50px;
}
.loader {
  color: rgb(226, 44, 44);
  text-align: center;
  padding: 50px;
  font-size: 16px;
}
.clearfix {
  clear: both;
}
</style>